import React from 'react';
import './index.less';
import { Table } from 'antd';
import request from '@/utils/umiRequest';

// export default (props) => {
//   // const {url=''} = props || {}
//   // console.log('table',props);
//   // request("/api/menus", {
//   //   method: 'POST',
//   //   body: values
//   // });
//   return <Table size="small" {...props} />
// }

export default class CommonTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableLoading: true,
      // 表格列表数据
      tableListData: [],
      clientW: 200,
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      otherParams: {},
    };
  }
  /**
   * 加载列表数据
   */
  loadTableList = async () => {
    const { pageSize, pageNumber, otherParams } = this.state;
    const { url = '' } = this.props || {};
    if (url) {
      this.setState({ tableLoading: true });
      const result = await request(url, {
        method: 'GET',
        body: { pageSize, pageNumber, ...otherParams },
      });
      const { success = false, msg, data = [], total = 0 } = result || {};
      this.setState({
        tableListData: data,
        total,
        tableLoading: false,
      });
      console.log('result====>', result);
    } else {
      console.log('列表缺少必要参数: 请求地址url缺失');
    }
  };
  componentWillMount() {
    console.log('componentWillMount');
    this.loadTableList();
  }
  componentDidMount() {
    const wrapElement = this.refs['common-table-wrap'];
    //wrapElement.getBoundingClientRect()
    const wrapHeight =
      wrapElement['clientHeight'] || wrapElement['offsetHeight'];
    // 头部 尾部｜翻页 滚动条
    this.setState({ clientW: wrapHeight - 38 - 58 - 15 - 10 });
  }

  /**
   * 根据筛选条件查询数据
   * @param {*} page
   * @param {*} pageSize
   */
  loadTableListByParms = (params) => {
    this.setState(
      {
        pageNumber: 1,
        otherParams: params,
      },
      this.loadTableList,
    );
  };
  /**
   * 页码变化时
   * @param {*} page
   * @param {*} pageSize
   */
  commonTableOnChange = (page, pageSize) => {
    this.setState(
      {
        pageNumber: page,
      },
      this.loadTableList,
    );
  };
  /**
   * 分页大小变化时
   * @param {*} current
   * @param {*} size
   */
  commonTableOnShowSizeChange = (current, size) => {
    this.setState(
      {
        pageSize: size,
        pageNumber: 1,
      },
      this.loadTableList,
    );
  };

  render() {
    const {
      tableLoading,
      tableListData = [],
      clientW,
      pageNumber,
      pageSize,
      total,
    } = this.state;
    const otherProps = this.props;
    return (
      <div
        style={{
          flex: 1,
          height: '100%',
          backgroundColor: '#fff',
          padding: 15,
        }}
        ref="common-table-wrap"
      >
        <Table
          scroll={{ y: clientW }}
          dataSource={tableListData}
          loading={tableLoading}
          pagination={{
            // position: ['bottomCenter'],
            current: pageNumber,
            size: 'middle',
            pageSizeOptions: [10, 20, 50, 100],
            showSizeChanger: true,
            hideOnSinglePage: false,
            pageSize: pageSize,
            total: total,
            onChange: this.commonTableOnChange,
            onShowSizeChange: this.commonTableOnShowSizeChange,
          }}
          size="small"
          {...otherProps}
        />
      </div>
    );
  }
}
